<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <div th:include="common/head_info::head_infor"></div>
    <script type="text/javascript" th:src="@{../js/moment-with-locales.min.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{../css/bootstrap-datetimepicker.css}">
    <script type="text/javascript" th:src="@{../js/bootstrap-datetimepicker.js}"></script>
    <script type="text/javascript" th:src="@{../js/bootstrap-datetimepicker.zh-CN.js}"></script>
    <script type="text/javascript" th:src="@{../js/associatorCount.js}"></script>
    <script type="text/javascript" th:src="@{../js/echarts.min.js}"></script>
    <title>Title</title>
</head>
<body>
<div class="container center" style="margin-top: 20px;">
    <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            请选择年份：
            <input type="text" class="form-control"  value="2018" id="dateTime" name="dateTime" readonly>
        </div>
        <button type="button" class="btn btn-default" onclick="getData()">查找</button>
    </form>
</div>
<div>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="container" style="width: 1000px;height:400px;"></div>

    <script type="text/javascript">
        //时间插件
        $('#dateTime').datetimepicker({
            language:  'zh-CN',
            format:'yyyy',
            startView: 4,
            minView: 4,
            autoclose: 1,
            pickerPosition: "bottom-left"
        });
        //echart插件
        var myChart = echarts.init(document.getElementById('container'));
        option = {
            title: {
                text: '客户统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['新增客户','活跃客户']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value'
            },
            series: []
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</div>
</body>
</html>